<template>
    <div>
          <Carousel name="1"></Carousel>   
         <el-main class='elmain clearfix'>
            <div :class="screenWidth>1366?'left':'leftDevice'">
              <Left v-model="palyid"></Left>  
            </div>
            <div :class="screenWidth>1366?'right':''"> 
                <Right></Right>   
            </div>
         </el-main>
    </div>
</template>

<script>
  import Carousel from '../../../src/components/carousel/carousel.vue'
  import     Left from '../../../src/components/left/left.vue'
  import    Right from '../../../src/components/right/right.vue'
export default {
    components:{
           Carousel,
           Left,
           Right
    },
    data(){
        return{
            screenWidth:document.body.clientWidth,
            palyid
        }
    },
    mounted:function(){
               const that = this
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                that.screenWidth = window.screenWidth
            })()
        }
    },
    watch:{
         screenWidth (val) {
                if (!this.timer) {
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        // that.screenWidth = that.$store.state.canvasWidth
                        console.log(that.screenWidth)
                       // that.init()
                        that.timer = false
                    }, 400)
                }
            },
            palyid(val){
                 console.log(val,3334);
            }
    },
    methods:{
    }
}
</script>
<style scoped>
   .elmain{
            width: 100%;
   }
   .left,.right{
     float: left;
   }
   .leftDevice{
       width: 100%;
   }
   .rigthDevice{
       width: 0;
       display: none
   }
   .left{
     width: 80%;
   }
   .right li{
       list-style: none;
   }
   .right li i{
       float: left;
   }
   .right{
     width: 20%;
   }
</style>
